<nb-card size="large">
  <nb-tabset fullWidth>
    <nb-tab tabTitle="信息" style="padding: 0!important;">
      <div *ngIf="!batchId" style="padding: 1.5em;">
        <div class="row" >
          <div class="input-group col-lg-12">
            <input type="text" class="form-control" [(ngModel)]="barcodeInput" name="barcodeInput" placeholder="输入条形码">
            <input type="text" class="form-control" [(ngModel)]="batchInput" name="batchInput" placeholder="输入批次号">
            <span class="input-group-append">
            <button class="btn btn-primary input-group-text" (click)="submit()">
              查询
            </button>
          </span>
          </div>
        </div>
      </div>
      <div *ngIf="batchId" class="accordion-container">
        <nb-accordion>

          <nb-accordion-item>
            <nb-accordion-item-header>
              生产
            </nb-accordion-item-header>
            <nb-accordion-item-body>
              <table *ngIf="foodName" class="table table-striped">
                <tr> <td>食品名称</td> <td>{{foodName}}</td></tr>
                <tr> <td>生产商</td> <td>{{manufacture}}</td></tr>
                <tr> <td>批次号</td> <td>{{batchCode}}</td></tr>
                <tr> <td>生产时间</td> <td>{{pd}}</td></tr>
                <tr> <td>上市日期</td> <td>{{ld}}</td></tr>
              </table>
              <span *ngIf="!foodName">
                暂无相关数据
              </span>

            </nb-accordion-item-body>
          </nb-accordion-item>

          <nb-accordion-item>
            <nb-accordion-item-header>
              生产许可证
            </nb-accordion-item-header>
            <nb-accordion-item-body>
              <nb-list *ngIf="qsCode">
                <nb-list-item>
                  许可证编号： <span class="list-info">{{qsCode}}</span>
                </nb-list-item>
                <nb-list-item>
                  生效日期： <span class="list-info">{{qsStartTime}}</span>
                </nb-list-item>
                <nb-list-item>
                  截止日期： <span class="list-info">{{qsEndTime}}</span>
                </nb-list-item>
              </nb-list>
              <span *ngIf="!qsCode">
                暂无相关数据
              </span>
            </nb-accordion-item-body>
          </nb-accordion-item>

          <nb-accordion-item>
            <nb-accordion-item-header>
              检验
            </nb-accordion-item-header>
            <nb-accordion-item-body>
              <table *ngIf="checkStandards" class="table table-striped">
                <tr> <td>通过检验标准</td> <td>{{checkStandards}}</td></tr>
                <tr> <td>检验方</td> <td>{{checkDepartment}}</td></tr>
                <tr> <td>检验时间</td> <td>{{checkDate}}</td></tr>
              </table>
              <span *ngIf="!checkStandards">
                暂无相关数据
              </span>
            </nb-accordion-item-body>
          </nb-accordion-item>

          <nb-accordion-item>
            <nb-accordion-item-header>
              物流
            </nb-accordion-item-header>
            <nb-accordion-item-body>
              <table *ngIf="transCode" class="table table-striped">
                <tr> <td>运单号</td> <td>{{transCode}}</td> <td></td> <td></td></tr>
                <tr> <td>运送公司</td> <td>{{transDepartment}}</td> <td></td> <td></td></tr>
                <tr *ngFor="let t of transInfo"> <td>时间</td> <td>{{t.time}}</td> <td>终点</td> <td>{{t.destination}}</td></tr>
              </table>
              <span *ngIf="!transCode">
                暂无相关数据
              </span>
            </nb-accordion-item-body>
          </nb-accordion-item>

        </nb-accordion>
      </div>
    </nb-tab>
    <nb-tab tabTitle="地图" style="padding: 0!important;">
      <ngx-amap #map class="demo-map" [resizeEnable]="true" [center]="manuLocation" [zoom]="6" [touchZoom]="true" >
        <amap-marker
          [position]="manuLocation"
          icon="http://webapi.amap.com/images/car.png"
          [offset]="{x:-26,y:-13}"
          [autoRotation]="true"
          (moving)="onMoving($event)"
          (ready)="onMarkerReady(map)">
        </amap-marker>
        <amap-info-window [position]="manuLocation">
          {{manufacture}}
        </amap-info-window>
        <amap-polyline
          [path]="transLocation"
          [strokeColor]="'#00A'"
          [strokeWeight]="3">
        </amap-polyline>
        <amap-polyline
          [path]="passedPath"
          [strokeColor]="'#F00'"
          [strokeWeight]="3">
        </amap-polyline>
      </ngx-amap>
      <br>
      <button nbButton class="btn btn-large btn-success" (click)="startMove()">播放</button>
      <br>
      <nb-alert *ngIf="!manuLocation" status="danger" >食品商未添加生产商经纬度</nb-alert>
    </nb-tab>
    <nb-tab tabTitle="所在区块">
      <table class="table table-striped">
        <tr>
          <th>区块编号/高度</th>
          <th>前一区块哈希值</th>
          <th>哈希值</th>
          <th>产生时间</th>
        </tr>
        <tr *ngFor="let b of blockInfo">
          <td>{{b.index}}</td>
          <td style="word-wrap:break-word;word-break:break-all;">
            <a [routerLink]="['/public/find-block']" [queryParams]="{hash: b.previousHash}">
              {{b.previousHash}}
            </a>
          </td>
          <td style="word-wrap:break-word;word-break:break-all;">
            <a [routerLink]="['/public/find-block']" [queryParams]="{hash: b.hash}">{{b.hash}}</a>
          </td>
          <td>{{b.timestamp | date}}</td>
        </tr>

      </table>
    </nb-tab>
  </nb-tabset>
  <nb-card-footer>注：上述信息都存在区块链上</nb-card-footer>
</nb-card>
